import React from 'react'
import PropTypes from 'prop-types';

// 函数组件
const FunctionComponent = function FunctionComponent(props) {
    console.log('props', props);
    const { title, x } = props
    let children = React.Children.toArray(props.children),
        headSlots = children.filter(item => item.props.slot === 'head'),
        footSlots = children.filter(item => item.props.slot === 'foot');
    return (
        <div className='demo-box'>
            {headSlots}
            {children}
            我是DemoOne
            <div>{title}</div>
            <div>{x}</div>
            {footSlots}
        </div>
    )
}


//--bug---defaultProps和propTypes不生效,也不报错
// 赋值属性默认值
FunctionComponent.defaultProps = {
    x: 0,
    title: '',
    arr: [],
    num: 0
};
// 设置属性规则
FunctionComponent.propTypes = {
    x: PropTypes.number,
    title: PropTypes.string.isRequired,
    arr: PropTypes.array,
    num: PropTypes.any
};

export default FunctionComponent;